<template>
        <div class="body">
          <!--顶部标题-->
          <h1>欢迎来到预约洗澡系统</h1>
          <!--顶部导航条开始-->
            <div>
              <span>
                <button type="button" class="yuanyetopbutton" :class="on_login_color" @click="loginClick">登录</button>
                <button type="button" class="yuanyetopbutton" :class="on_register_color" @click="registerClick">注册</button>
              </span>
            </div>

          <!--登录注册开始-->
          <form v-if="key===0">
            用户名：<input type="text" name="username" v-model="username"> <br>
            密  码： <input type="password" name="password" v-model="password"> <br>
            <button type="button" class="yuanyeformbutton" @click="searchUserByName">登录</button>

          </form>

          <form v-else>
            用户名：<input type="text" name="username" v-model="username"> <br>
            密  码： <input type="password" name="password" v-model="password"> <br>
            电  话： <input type="text" name="phone" v-model="phone"> <br>
            性  别：<input type="text" name="sex" v-model="sex"> <br>
            <a href="javascript:;" @click="addUser">注册</a>
          </form>
        </div>

</template>
<script>
export default {
  name: 'hello',
  data () {
    return {



      //用key值实现动态显示注册或登录,用背景色的改变来表示哪个按钮被点击
      key:0,
      on_login_color:{ondown:true,onup:false},
      on_register_color:{onup:true,ondown:false},

      //双向绑定注册数据
      username: '',
      type: 'user',
      password: '',
      sex: '男',
      phone: '123',



    }
  },
  methods: {
    loginClick(){
      //更改按钮颜色样式
      this.on_login_color.ondown=true
      this.on_login_color.onup=false
      this.on_register_color.ondown=false
      this.on_register_color.onup=true

      //更改key值
      this.key=0

    },
    registerClick(){
      //更改按钮颜色样式
      this.on_login_color.ondown=false
      this.on_login_color.onup=true
      this.on_register_color.ondown=true
      this.on_register_color.onup=false

      //更改key值
      this.key=1
    },
    boyClick(){
      this.sex='男'
    },
    girlClick(){
      this.sex='女'
    },
    addUser() {
      var username = this.username;
      var password = this.password;
      var   phone  = this.phone;
      var   sex    = this.sex;
      var   type   = this.type;
      this.$http.post('/api/addUser', {
        username: username,
        password: password,
        phone: phone,
        sex: sex,
        type: type
      },{}).then((response) => {
        console.log(response);
      }).catch(function(err){
        console.log(err);
      })
    },

    async searchUserByName(){
      var username=this.username;
      var password=this.password;
      var userlist={};
      userlist=await this.$http.get('/api/getUserList');
      userlist=userlist.data.message
      console.log(userlist)

      //通过user表来判断用户是否为真用户
      var isuser=false;
      var usertype='';
      for(let i=0;i<userlist.length;i++){
        if(userlist[i].username==username&&userlist[i].password==password){
          isuser=true;
          usertype=userlist[i].type;
        }
      }
      if(isuser==false){
        alert('用户名或密码错误');
      }
      else{
        if(usertype=='user'){
          this.$router.push({
          			path:'/userindex',
          			query:{username:username},
          })
        }
        else if(usertype=='admin'){
          this.$router.push({
          			path:'/adminindex',
          			query:{
          				username:username
              }
          })
        }
        else if(usertype=='zaotang'){
          this.$router.push({
          			path:'/zaotangindex',
          			query:{
          				username:username
              }
          })
        }
        else alert("你！非法")
      }

    }


  }//methods end
}

</script>
<style>
  .ondown{
    background-color:cyan
  }
  .onup{
    background-color:fuchsia
  }
  .body{
    height:fit-content;
    width: 100vw;
  }
  .yuanyetopbutton{
    width: 40vw;
    height: 8vh;
  }
  .yuanyeformbutton{
    font-size: large;
    background-color: greenyellow;
    width: 42vw;
    height: 6vh;
  }

</style>
